<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS定位</title>
    <style>
        /* 相对定位 */
        #box1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        #box1 .box-normal-1 {
            width: 80px;
            height: 80px;
            background-color: yellowgreen;
        }
        #box1 .box-relative {
            width: 80px;
            height: 80px;
            background-color: blue;
            position: relative;
            top: 20px;
            left: 50px;
        }
        #box1 .box-normal-2 {
            width: 80px;
            height: 80px;
            background-color: yellow;
        }

        /* 绝对定位 */
        #box2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 这里父级元素必须设置一个除 static 以外的定位方式 */
            position: relative;
        }
        #box2 .box-normal-1 {
            width: 80px;
            height: 80px;
            background-color: yellowgreen;
        }
        #box2 .box-absolute {
            width: 80px;
            height: 80px;
            background-color: blue;
            position: absolute;
            top: 20px;
            left: 50px;
        }
        #box2 .box-normal-2 {
            width: 80px;
            height: 80px;
            background-color: yellow;
        }

        /* 固定定位 */
        #box3 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        #box3 .box-normal-1 {
            width: 80px;
            height: 80px;
            background-color: yellowgreen;
        }
        #box3 .box-fixed {
            width: 80px;
            height: 80px;
            background-color: blue;
            position: fixed;
            right: 80px;
            bottom: 40px;
        }
        #box3 .box-normal-2 {
            width: 80px;
            height: 80px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>定位方式</h1>
    <p>使用 position 属性设置元素的定位方式。</p>
    <p>使用属性 top bottom left right 来设置定位的元素相对于参照物的距离是多少。</p>
    <h1>相对定位</h1>
    <p>这里蓝色方块使用相对定位，在设置定位后元素本身所占用的位置不变，依然占据它原来的位置。</p>
    <p>这里元素的定位相对于它原来的位置进行定位：</p>
    <div id="box1">
        <div class="box-normal-1"></div>
        <div class="box-relative"></div>
        <div class="box-normal-2"></div>
    </div>
    <h1>绝对定位</h1>
    <p>这里蓝色方块使用绝对定位，在设置定位后元素本身脱离页面文档流，即不占据它原来的位置。</p>
    <p>这里元素的定位相对于距离它最近的已定位的父级元素进行定位：</p>
    <p>（这里的父级元素必须设置一个除了默认的 static 以外的定位，否则绝对定位的元素会在其上级寻找已定位的父级元素，直至相对于整个页面进行定位。）</p>
    <div id="box2">
        <div class="box-normal-1"></div>
        <div class="box-absolute"></div>
        <div class="box-normal-2"></div>
    </div>
    <h1>固定定位</h1>
    <p>这里蓝色方块使用固定定位，在设置定位后元素本身脱离页面文档流，即不占据它原来的位置。</p>
    <p>这里元素的定位相对于浏览器的窗口进行定位。网页上常见的小广告经常使用此定位方式 :-(</p>
    <div id="box3">
        <div class="box-normal-1"></div>
        <div class="box-fixed">
            <p>经典传奇</p>
            <p>一刀999</p>
        </div>
        <div class="box-normal-2"></div>
    </div>
    <!-- 多整点换行让页面长一点 -->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>